/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet, TouchableOpacity, View, Animated, FlatList, Text,
} from "react-native";
import { connect } from "react-redux"; // 引入connect函数
import {
  Color, ScreenWidth, FontSize, scale,
} from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
import ImageButton from "../widget/common/ImageButton";
import BasePage from "../widget/common/BasePage";
import NCText from "../widget/common/NCText";
import * as chooseDeviceModelAction from "../actions/chooseDeviceModelAction"; // 导入action方法
import NetWorkUtil from "../utils/NetWorkUtil";
import EnumConstants from "../common/EnumConstants";

const { DeviceListType } = EnumConstants;
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

const HEADERTAGWIDTH = (ScreenWidth * 3) / 4;
const MAINFLATLISTWIDTH = (ScreenWidth * 1) / 4;
const SUBFLATLISTWIDTH = (ScreenWidth * 3) / 4;

let deviceType;
let tag;
let callback;
let serviceId;

class ChooseDeviceModel extends Component {
  constructor(props) {
    super(props);
    tag = NavigatorUtil.getPageParam(props, "tag");
    deviceType = NavigatorUtil.getPageParam(props, "type");
    callback = NavigatorUtil.getPageParam(props, "callback");
    serviceId = NavigatorUtil.getPageParam(props, "serviceId");
    this.handleTagChange(tag, false);
  }

  componentWillMount() {
    const { props } = this;
    props.dispatch(chooseDeviceModelAction.getDeviceModelList(deviceType, tag));
  }

  componentWillUnmount() {
    const { props } = this;
    props.dispatch(chooseDeviceModelAction.unmount());
  }

  handleTagChange(newTag, refresh = true) {
    const { props } = this;
    const { chooseDeviceModelReducer } = props;
    const { curTag, brandId } = chooseDeviceModelReducer;
    curTag !== newTag && props.dispatch(chooseDeviceModelAction.onTagChange(deviceType, newTag, brandId, refresh));
  }

  handleBrandIdChange(newBrandId) {
    const { props } = this;
    const { chooseDeviceModelReducer } = props;
    const { curTag, brandId } = chooseDeviceModelReducer;
    brandId !== newBrandId && props.dispatch(chooseDeviceModelAction.onBrandIdChange(deviceType, curTag, newBrandId));
  }

  renderHeader() {
    const { chooseDeviceModelReducer } = this.props;
    const { curTag } = chooseDeviceModelReducer;
    return (
      <View style={styles.hContainer}>
        <View style={styles.headerConatiner}>
          <TouchableOpacity onPress={() => this.handleTagChange(0)} style={styles.flex}>
            <NCText
              text={deviceType === DeviceListType.RECYCLE ? "回收手机" : "手机"}
              style={curTag === 0 ? styles.tagSelected : styles.tagUnSelected}
              textStyle={styles.textTag}
            />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.handleTagChange(1)} style={styles.flex}>
            <NCText
              text={deviceType === DeviceListType.RECYCLE ? "回收平板" : "平板"}
              style={curTag === 1 ? styles.tagSelected : styles.tagUnSelected}
              textStyle={styles.textTag}
            />
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  renderMainItemView = ({ item, index }) => {
    const { props } = this;
    const { chooseDeviceModelReducer } = props;
    const { brandId } = chooseDeviceModelReducer;
    const isCur = brandId === item.brand_id;
    return (
      <TouchableOpacity style={styles.mainItemContainer} onPress={() => this.handleBrandIdChange(item.brand_id)}>
        <View style={[styles.mainItemContnet, { backgroundColor: isCur ? Color.white : Color.background_native }]}>
          <Text>{item.brand_name}</Text>
        </View>
        {isCur && <View style={styles.mainItemLabelSelected} />}
      </TouchableOpacity>
    );
  };

  handleItemPress(item, index) {
    if (callback) {
      callback(item);
      NavigatorUtil.goBack();
    } else if (deviceType === DeviceListType.RECYCLE) {
      NavigatorUtil.goRecyclePriceInfo(item);
    } else {
      item.service_id = serviceId;
      NavigatorUtil.goServiceInfo(item);
    }
  }

  renderSubItemView = ({ item, index }) => {
    return (
      <ImageButton
        onPress={() => this.handleItemPress(item, index)}
        style={styles.subItemContainer}
        text={item.facility_name}
        textColor={Color.text_title}
        fontSize={FontSize.SIZE_14}
        source={{ uri: NetWorkUtil.getFileUrl(item.facility_src) }}
        itMargin={scale * 4}
        imgHeight={SUBFLATLISTWIDTH / 2}
        imgWidth={SUBFLATLISTWIDTH / 2 - 20 * scale}
      />
    );
  };

  renderMainFooter = ({ item, index }) => {
    return <View style={styles.mainFooter} />;
  };

  renderSubFooter = ({ item, index }) => {
    return <View style={styles.subFooter} />;
  };

  render() {
    const { chooseDeviceModelReducer } = this.props;
    const {
      loading, initing, deviceModels, deviceList,
    } = chooseDeviceModelReducer;
    return (
      <BasePage showLoading={loading} loadingTextContent="加载中">
        {this.renderHeader()}
        <View style={styles.listRowConatiner}>
          <AnimatedFlatList
            style={styles.mainFlatList}
            data={deviceModels}
            ListFooterComponent={this.renderMainFooter}
            renderItem={this.renderMainItemView}
            keyExtractor={(_, i) => String(i)}
            onEndReachedThreshold={0.5}
          />
          <AnimatedFlatList
            style={styles.subFlatList}
            data={deviceList}
            ListFooterComponent={this.renderSubFooter}
            numColumns={2}
            renderItem={this.renderSubItemView}
            keyExtractor={(_, i) => String(i)}
            onEndReachedThreshold={0.5}
          />
        </View>
      </BasePage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.background_native,
  },
  flex: {
    flex: 1,
  },
  spaceBetween: {
    flex: 1,
    paddingHorizontal: scale * 45,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  tagSelected: {
    flex: 1,
    backgroundColor: Color.tab_yellow,
  },
  tagUnSelected: {
    flex: 1,
    backgroundColor: Color.white,
  },
  hContainer: {
    width: ScreenWidth,
    height: 60 * scale,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Color.white,
  },
  headerConatiner: {
    width: HEADERTAGWIDTH,
    flexDirection: "row",
    backgroundColor: Color.white,
    height: 26 * scale,
    borderRadius: scale * 6,
    borderColor: Color.tab_yellow,
    borderWidth: 1,
  },
  listRowConatiner: {
    flexDirection: "row",
  },
  mainFlatList: {
    width: MAINFLATLISTWIDTH,
    backgroundColor: Color.background_native,
  },
  subFlatList: {
    width: SUBFLATLISTWIDTH,
    backgroundColor: Color.white,
  },
  mainItemContainer: {
    width: MAINFLATLISTWIDTH,
    height: scale * 44,
    backgroundColor: Color.white,
  },
  mainItemContnet: {
    width: MAINFLATLISTWIDTH,
    height: scale * 43,
    backgroundColor: Color.background_native,
    alignItems: "center",
    justifyContent: "center",
  },
  mainItemLabelSelected: {
    width: 2,
    backgroundColor: Color.tab_yellow,
    height: scale * 44,
    position: "absolute",
  },
  subItemContainer: {
    width: SUBFLATLISTWIDTH / 2,
    marginBottom: 10 * scale,
  },
  subFooter: {
    height: 60 * scale,
  },
  mainFooter: {
    height: 80 * scale,
  },
});

const reducers = state => {
  return {
    chooseDeviceModelReducer: state.chooseDeviceModelReducer,
  };
};

export default connect(reducers)(ChooseDeviceModel);
